<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSP 'menuIndex.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/style.css">
    <script type="text/javascript" src="/resources/js/index.js"></script>
    <link rel="stylesheet" href="/resources/css/zTreeStyle/metroStyle.css">
    <script type="text/javascript" src="/resources/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/resources/js/jquery.ztree.all.min.js"></script>

</head>
<script type="text/javascript">
    layui.use('layer', function () {
        var layer = layui.layer;
        var form = layui.form;
        $ = layui.jquery
    });

    $(function () {
        var result = ${jsonArray};
        $.fn.zTree.init($("#tree"), setting, result);
    });
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "menuPid"
            }
        },
        callback: {
            onClick: zTreeOnClick
            //回调
        },
        check: {
            enable: true,//设置复选框
            chkStyle: "checkbox"
        }
    };

    function zTreeOnClick(event, treeId, treeNode) {
    }

    function buttonClick() {
        var roleName = $("#roleName").val();
        var roleId  = $("#roleId").val();

        //获取树
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        //获取树节点
        var nodes = treeObj.getCheckedNodes();

        var node = "";
        for (var i = 0; i < nodes.length; i++) {
            node = node + "," + nodes[i].menuId;
        }
        location.href = "/updateRole?roleName=" + roleName + "&roleId="+roleId + "&node=" + node;
    }
</script>
<body>
<div class="pos-a"
     style="width: 400px; left: 0; top: 0; bottom: 0; height: 100%; border-right: 1px solid #e5e5e5; background-color: #f5f5f5">
    <div class="layui-form-item center"><br/><br/>
        <label class="layui-form-label">用户组名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" name="roleName" required value="${roleName}"
                   style="width: 240px" lay-verify="required" placeholder="请输入用户组名"
                   autocomplete="off" class="layui-input">
            <input type="hidden" id="roleId" name="roleId" value="${roleId}">
        </div>
    </div>
    <div class="layui-form-item center">
        <label class="layui-form-label">选择权限</label>
        <div class="layui-input-block">
            <div class="pos-a"
                 style="width: 240px; border-right: 0px solid #e5e5e5; background-color: #f5f5f5">
                <ul id="tree" class="ztree" ></ul>
            </div>
        </div>
    </div>
    <div class="layui-form-item center">
        <div class="layui-input-block">
            <button class="layui-btn" onclick="buttonClick()">立即提交</button>
        </div>
    </div>
</div>
</body>
</html>
